<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="btn_add">添加</button>
		<button type="button" id="btn_del_batch">批量删除</button>
		<table border="" cellspacing="" cellpadding="">
			<thead></thead>
			<tbody></tbody>
		</table>
		<h1 id="h1_total">总价格：￥</h1>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let books = [{
					id: 1,
					name: 'Java从入门到放弃',
					price: 80,
					tdate: '2020-07-01',
					count: 1
				},
				{
					id: 2,
					name: 'Vue从入门到放弃',
					price: 90,
					tdate: '2020-07-02',
					count: 1
				},
				{
					id: 3,
					name: 'Mysql从入门到放弃',
					price: 100.01,
					tdate: '2020-07-03',
					count: 1
				},
				{
					id: 4,
					name: '啥都从入门到放弃',
					price: 70.00,
					tdate: '2020-07-04',
					count: 1
				},
			];

			function drawHead() {
				let titles = ["序号", "书籍名称", "出版日期", "价格", "购买数量", "操作"];
				let tr = "<tr>";
				tr += "<th>";
				tr += "<input type='checkbox' name='cb_sel_all' />";
				tr += "</th>";
				$(titles).each(function(index, item) {
					tr += "<th>"
					tr += item
					tr += "</th>"
				});
				tr += "</tr>";

				$("table>thead").append(tr);
			}

			function drawBody() {
				$("table>tbody").empty();
				$(books).each(function(index, item) {
					let tr =
						`
						<tr>
							<td><input type='checkbox' name='cb_sel' value='${item.id}' /></td>
							<td>
								${item.id}
							</td>
							<td>
								<span>${item.name}</span>
								<input type="text" dataprop="name" hidden value="${item.name}" />
							</td>
							<td>
								<span>${item.tdate}</span>
								<input type="date" dataprop="tdate" hidden value="${item.tdate}" />
							</td>
							<td>
								<span>${item.price}</span>
								<input type="text" dataprop="price" hidden value="${item.price}" />
							</td>
							<td>
								<span>
									<button type="button" onclick="mouse(this, ${index})">-</button>
									<span>${item.count}</span>
									<button type="button" onclick="add(this, ${index})">+</button>
								</span>
								<input type="number" dataprop="count" hidden value="${item.count}" />
							</td>
							<td>
								<button type="button" onclick="del(${item.id})">删除</button>
								<button type="button" onclick="edit(this)">编辑</button>
								<button type="button" onclick="saveEdit(this, ${index})" hidden>保存</button>
							</td>
						</tr>
					`;

					$("table>tbody").append(tr);
				});
			}
			
			function mouse(self, index) {
				let editItem = books[index];
				$(self).next().text(--editItem.count);
				calTotal();
			}
			
			function add(self, index) {
				let editItem = books[index];
				$(self).prev().text(++editItem.count);
				calTotal();
			}

			/**
			 * 计算总价格
			 */
			function calTotal() {
				let total = 0;
				$(books).each(function(index, item) {
					total += item.price * item.count;
				});
				$("h1").text("总价格：￥" + total);
			}

			function save(self) {
				let tr = $(self).parent().parent();
				let obj = {};
				// console.log(tr.find("input"));
				tr.find("input").each(function(index, item) {
					obj[$(item).attr("dataprop")] = $(item).val();
				});
				// obj.id = tr.find("input").eq(0).val()
				// obj.name = tr.find("input").eq(1).val()
				console.log(obj);
				books.push(obj);

				drawBody();
				calTotal();
			}

			/**
			 * 编辑保存
			 * @param {Object} self
			 * @param {Object} index
			 */
			function saveEdit(self, index) {
				let tr = $(self).parent().parent();
				let editItem = books[index];
				// console.log(editItem);
				tr.find("input").each(function(index, item) {
					editItem[$(item).attr("dataprop")] = $(item).val();
				});
				// console.log(editItem);
				// console.log(books);
				drawBody();
				calTotal();
			}

			function del(id) {
				let yes = confirm(`确认是否删除id为${id}的记录?`);
				if (!yes) {
					return;
				}
				$(books).each(function(index, item) {
					if (item.id === id) {
						books.splice(index, 1);
					}
				});

				drawBody();
				calTotal();
			}

			/**
			 * 编辑按钮功能
			 */
			function edit(self) {
				//将td中的input显示，其它隐藏
				console.log(self);
				let tr = $(self).parent().parent();
				tr.find("span").hide();
				tr.find("input").show();

				//将编辑隐藏，将保存按钮显示
				$(self).hide();
				$(self).next().show();
			}

			$(function() {
				drawHead();
				drawBody();
				calTotal();

				$("#btn_add").click(function() {
					let tr =
						`
						<tr>
							<td></td>
							<td>
								<input type="text" dataprop="id" value="" />
							</td>
							<td>
								<input type="text" dataprop="name" value="" />
							</td>
							<td>
								<input type="date" dataprop="tdate" value="" />
							</td>
							<td>
								<input type="text" dataprop="price" value="" />
							</td>
							<td>
								<input type="number" dataprop="count" value="" />
							</td>
							<td>
								<button type="button" onclick="save(this)">保存</button>
								<button type="button">取消</button>
							</td>
						</tr>
					`;
					$("table>tbody").append(tr);
				});

				$("#btn_del_batch").click(function() {
					let yes = confirm(`确认是否删除已选择的记录?`);
					if (!yes) {
						return;
					}
					$("input[name='cb_sel']:checked").each(function(index, item) {
						let id = $(item).val();
						console.log(typeof id);
						$(books).each(function(index, item) {
							if (item.id === parseInt(id)) {
								books.splice(index, 1);
							}
						});
					});

					drawBody();
					calTotal();
				});

				$("input[name='cb_sel_all']").change(function(event) {
					/*	attr()：使用key=value形式的属性，获取checked，disabled, readonly，会返回undefined
					 * 	prop()：单个值，比如checked，disabled, readonly，会返回boolean值
					 */
					console.log($(this).prop("checked"));

					$("input[name='cb_sel']").prop("checked", $(this).prop("checked"));
				});

				$("table>tbody>tr").each(function(index, item) {
					// console.log($(item).find("td").slice(2, 6));
					$(item).find("td").slice(2, 6).dblclick(function() {
						let self = $(this);
						self.find("span").hide();
						self.find("input").show();

						self.find("input").blur(function() {
							self.find("span").show();
							self.find("input").hide();
							let editItem = books[index];
							editItem[$(this).attr("dataprop")] = $(this).val();
							drawBody();
							calTotal();
						});
					});
				});
			});
		</script>
	</body>
</html>
